<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./axios.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
	<style type="text/css">
		#components-layout-demo-top-side-2 .logo {
		  width: 120px;
		  height: 31px;
		  background: rgba(255, 255, 255, 0.2);
		  margin: 16px 28px 16px 0;
		  float: left;
		}
		.ant-dropdown-link{
			float:right;
			margin-right:80px;
		}
		.ant-dropdown-link1{
			float:right;
			margin-right:80px;
		}
		.slider {
		  height: 340px;
		  width: 790px;
		  margin: 100px auto;
		  position: relative;
		}
		
		.slider li {
		  position: absolute;
		  display: none;
		}

		.arrow {
		  display: none;
		}
		
		.slider:hover .arrow {
		  display: block;
		}
		
		.arrow-left,
		.arrow-right {
		  font-family: "SimSun", "宋体";
		  width: 30px;
		  height: 60px;
		  background-color: rgba(0, 0, 0, 0.1);
		  position: absolute;
		  top: 50%;
		  margin-top: -30px;
		  cursor: pointer;
		  text-align: center;
		  line-height: 60px;
		  color: #fff;
		  font-weight: 700;
		  font-size: 30px;
		}
		
		.arrow-left:hover,
		.arrow-right:hover {
		  background-color: rgba(0, 0, 0, .5);
		}
		
		.arrow-left {
		  left: 0;
		}
		
		.arrow-right {
		  right: 0;
		}
		#test{
			display:none;
			height:600px;
			width:500px;
			position:absolute;
			top:12%;
			left:30%;
		}
		.notclick {
			pointer-events: none;
			opacity:0.4;
		}
		img{
			text-align:center;
			width:700px;
			height:400px;
		}
	</style>
</head>
<body>
<div id="app">
	<div id="user">
	<a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
    <a class="ant-dropdown-link1" @click="login">登录</a>
    
	
	<img style="height:50px;" class="logo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592721080850&di=6ddb54e78cf473fd61392c73dcbe7165&imgtype=0&src=http%3A%2F%2Ffile.digitaling.com%2FeImg%2Fuimages%2F20160411%2F1460368817941866.gif">
      
    </a-layout-header>
	
    <a-layout>
      
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
			<div class="slider">
			  <ul>
			    <li><a href="#"><img src="http://img5.imgtn.bdimg.com/it/u=1730732073,3508443048&fm=26&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img1.imgtn.bdimg.com/it/u=3370728639,1322917430&fm=15&gp=0.jpg" alt=""></a></li>			  
			    <li><a href="#"><img src="http://img1.imgtn.bdimg.com/it/u=2960491523,2590117866&fm=15&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img2.imgtn.bdimg.com/it/u=1507247080,623528206&fm=15&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img1.imgtn.bdimg.com/it/u=1740004801,3475458670&fm=26&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img3.imgtn.bdimg.com/it/u=3169264078,3269065935&fm=15&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img1.imgtn.bdimg.com/it/u=1702192470,2552127613&fm=15&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img3.imgtn.bdimg.com/it/u=3532253740,195941585&fm=11&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img5.imgtn.bdimg.com/it/u=1730732073,3508443048&fm=26&gp=0.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://img1.imgtn.bdimg.com/it/u=3370728639,1322917430&fm=15&gp=0.jpg" alt=""></a></li>
			  </ul>
			  <!--箭头-->
			  <div class="arrow">
				<span class="arrow-left">&lt;</span>
				<span class="arrow-right">&gt;</span>
			  </div>
			</div>
        </a-layout-content>
    </a-layout>
  </a-layout>
  </div>
  <div id="test">
	<div style="position:absolute;top:5%;right:5%;">
		<a @click="close"><a-icon type="close" /></a>
	</div>
	<iframe src="Login.html" id="login" name="login" frameBorder=1 scrolling=no height="500px" width="500px" ></iframe>
  </div>
</div>
<script>
    var app = new Vue({
        // e1: '#app',
        //注意这时l来着l
        el: '#app',
        data() {	
			return {
				collapsed: false,
			};
		  },
		mounted(){
			this.picture();
			this.filter();
		},
        methods: {
			picture(){
				var count = 0;
				$("li:eq(0)").fadeIn();
				$(".arrow-right").click(function () {
				  count++;
				  
				  
				  if(count == $(".slider li").length){
					count = 0;
				  }
				  console.log(count);
				  //让count渐渐的显示，其他兄弟渐渐的隐藏
				  $(".slider li").eq(count).fadeIn(1000).siblings("li").fadeOut(1000);
				});
				
				$(".arrow-left").click(function () {
				  count--;
			  
				  if(count == -1){
					count = $(".slider li").length - 1;
				  }
				  console.log(count);
				  //让count渐渐的显示，其他兄弟渐渐的隐藏
				  $(".slider li").eq(count).fadeIn(1000).siblings("li").fadeOut(1000);
				})
			},
			close(){
				$("#test").hide("slow");
				$("#user").removeClass("notclick");
			},
			filter(){
				if(this.readCookie("name")!=""){
					alert("你已登陆！！！");
					window.location.href="first.html";
				}
			},
			login(){
				$("#test").show("slow");
				$("#user").addClass("notclick");
			},
			readCookie:function(name){
				var nameEQ=name + "=";
				var ca = document.cookie.split(';');
				for(var i=0;i<ca.length;i++){
					var c=ca[i];
					while(c.charAt(0)==' ')c=c.substring(1,c.length);
					if(c.indexOf(nameEQ)==0)
						return c.substring(nameEQ.length,c.length);
				}
				return "";
			},
			
		},
		

    })
</script>
</body>
</html>